<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #mycanvas {
            width: 220px;
            height: 40px;
            border: 1px solid #000;
        }
    </style>
</head>

<body>
    <canvas id="mycanvas" width="220" height="40"></canvas>
    <script>
        const canvas = document.querySelector('#mycanvas');
        const ctx = canvas.getContext('2d');

        function getRandom(max, min) {
            return parseInt(Math.random() * (max - min + 1) + min)
        }
        const codes = []
        const w = canvas.clientWidth;
        const h = canvas.clientHeight
        const VideoColorSpace = ["red", "yellow", "blue", "green", "pink", "black"]
        const code_Len = 4;

        ctx.fillStyle = 'rgba(0, 0, 255, 0.5)'

        ctx.fillRect(0, 0, w, h)

        function generateRandom() {
            const chars = "abcdefghijkmnpqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ123456789";
            const charsArr = chars.split("");
            for (let i = 0; i < code_Len; i++) {
                let chartAt = charsArr[getRandom(0, charsArr.length - 1)];
                codes.push(chartAt.toLowerCase())
            }
            console.log(codes);
        }
        generateRandom();

        function drawText() {
            for (let i = 0; i < codes.length; i++) {
                const deg = getRandom(-30, 30);
                let fs = getRandom(18, 40);
                console.log(fs);
                ctx.font = fs + 'px Verdana';
                ctx.save();
                ctx.fillStyle = VideoColorSpace[getRandom(0, VideoColorSpace.length - 1)]
                ctx.textBaseline = 'top'
                ctx.translate(30 * i + 15, 15);
                ctx.rotate(deg * Math.PI / 180);
                ctx.fillText(codes[i], -10, -10);
                ctx.restore()
            }
        }
        drawText()

        function drawLine() {
            const lineNumber = 3; // 线条条数
            for (let i = 0; i < lineNumber; i++) {
                ctx.beginPath();
                ctx.moveTo(getRandom(0, w), getRandom(0, h));
                ctx.lineTo(getRandom(0, w), getRandom(0, h));
                ctx.closePath();
                ctx.stroke()
            }
        }
        drawLine()
    </script>
</body>

</html>